<template>
    <div class="detail">
        <div class="header">
            <router-link tag="div" to="/phoneBook" class="iconfont">&#xe667;</router-link>
        </div>

        <div class="image">
            <div class="info">
                <img :src="getImage(phoneBook.image)" @click="handleShowGallery"/>
            </div>
            <div class="action">
                <button @click="modifyImage">修改头像</button>
                <input type="file" name="file" accept="image/png,image/gif,image/jpeg,image/jpg" ref="file" @change="upload">
            </div>
        </div>

        <div class="userInfo">
            <div class="item border-bottom">
                <span>姓名</span>
                <input type="text" v-model="phoneBook.name">
            </div>
            <div class="item border-bottom">
                <span>手机号码</span>
                <input type="text" v-model="phoneBook.phoneNumber">
            </div>
            <div class="item border-bottom">
                <span>座机电话号码</span>
                <input type="text" v-model="phoneBook.teleNumber">
            </div>
            <div class="item border-bottom">
                <span>工作单位地址</span>
                <textarea v-model="phoneBook.workAddress"></textarea>
            </div>
            <div class="item border-bottom">
                <span>家庭地址</span>
                <textarea v-model="phoneBook.homeAddress"></textarea>
            </div>
            <div class="item border-bottom">
                <span>备注</span>
                <textarea v-model="phoneBook.remark"></textarea>
            </div>
        </div>

        <div class="action">
            <div class="item border-bottom">
                <a @click="updateInfo">保存</a>
            </div>
            <div class="item border-bottom">
                <a @click="deleteInfo">删除</a>
            </div>
        </div>

        <gallery v-show="showGallery"
                 :galleryImage="galleryImage"
                 @handleHideGallery="handleHideGallery">
        </gallery>
    </div>
</template>

<script>
import axios from 'axios'
import PubSub from 'pubsub-js'
import sysConfig from '@/config/sys.js'
import Gallery from '@/components/home/Gallery'

export default {
    name: "Detail",
    data() {
        return {
            phoneBook: {image: 'default.jpg'},
            showGallery: false,
            galleryImage: ''
        }
    },
    components: {
        Gallery
    },
    methods: {
        getImage(image) {
            return sysConfig.getBackApi('image/' + image);
        },
        handleShowGallery() {
            this.galleryImage = sysConfig.getBackApi('image/' + this.phoneBook.image);
            this.showGallery = true
        },
        handleHideGallery() {
            this.showGallery = false
        },
        modifyImage() {
            this.$refs.file.click();
        },
        upload(e) {
            let file = e.target.files[0];
            let formData = new FormData();
            formData.append('file', file, file.name);

            const instance = axios.create({
                baseURL: 'http://localhost:8080/',
                headers: {'Content-Type': 'multipart/form-data', 'token': window.localStorage.getItem("token")}
            })
            instance.post('image/upload', formData)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.phoneBook.image = response.data.data.title;
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
        },
        getInfo() {
            let url = sysConfig.getBackApi('phoneBook/findById');
            let token = window.localStorage.getItem('token')
            axios.defaults.headers.common['token'] = token;
            axios.get(url, {
                params: {
                    id: this.$route.params.id
                }
            }).then(response => {
                this.phoneBook = response.data.data.phoneBook
            }).catch(error => {
                alert(error)
            })
        },
        updateInfo() {
            let url = sysConfig.getBackApi('phoneBook/save');
            if (this.phoneBook.name == null || this.phoneBook.name.trim() === '') {
                alert("姓名不为空！")
                return;
            }
            if (this.phoneBook.phoneNumber == null || this.phoneBook.phoneNumber.trim() === '') {
                alert("手机号码不为空！")
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(this.phoneBook.phoneNumber))) {
                alert("手机号码有误，请重填");
                return;
            }
            if (this.phoneBook.teleNumber != null && this.phoneBook.teleNumber.trim() !== '' && !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(this.phoneBook.teleNumber)) {
                alert('固定电话有误，请重填');
                return false;
            }
            axios.post(url, this.phoneBook).then(response => {
                if (response.data.code === 200) {
                    alert("修改成功")
                    PubSub.publish('refreshPhoneBook', '')
                    this.$router.replace('/phoneBook')
                } else {
                    alert(response.data.msg)
                }
            }).catch(error => {
                alert(error)
            })
        },
        deleteInfo() {
            if (confirm("您确定要删除这条记录吗？")) {
                let url = sysConfig.getBackApi('phoneBook/delete');
                axios.delete(url, {
                    params: {
                        id: this.phoneBook.id
                    }
                }).then(response => {
                    if (response.data.code === 200) {
                        alert("删除成功")
                        PubSub.publish('refreshPhoneBook', '')
                        this.$router.replace('/phoneBook')
                    } else {
                        alert(response.data.msg)
                    }
                }).catch(error => {
                    alert(error)
                })
            }
        },

    },
    mounted() {
        this.getInfo()
    }
}
</script>

<style lang="stylus" scoped>

@import "~@/assets/styles/varibles.styl"

.border-bottom
    &:before
        border-color: $borderColor

.detail
    .header
        position: fixed
        top: 0
        overflow: hidden
        height: $headerHeight
        line-height: $headerHeight
        text-align: left
        padding-left: .2rem
        padding-top: .1rem
        background-color: $borderColor
        width: 100%
        z-index: 10
        opacity: .8

    .image
        margin-top: .86rem
        text-align: center
        width: 90%
        height: 2.5rem

        .info
            img
                float: left
                border-radius: .5rem
                overflow: hidden
                padding: .3rem
                width: 2rem
                height: 2rem

        .action
            padding-top: 1.55rem
            text-align: left

            button
                background-color: #4caf50
                border: none
                color: #fff
                padding: .15rem
                text-align: center
                text-decoration: none
                display: inline-block
                font-size: 16px
                border-radius: .2rem

            input
                display: none

    .userInfo
        padding-left: .3rem
        padding-top: 0

        .item
            padding-top: .3rem
            padding-bottom: .1rem

            span
                display: block
                font-weight: 700

            input
                padding-top: .1rem
                width: 100%

            textarea
                padding-top: .1rem
                width: 100%

    .action
        padding-top: .5rem;
        padding-bottom: 2rem;

        .item
            width: 100%;
            text-align: center;
            padding-top: .3rem;
            padding-bottom: .3rem;

            a
                font-size: .4rem;
                color: #576b97;

</style>
